<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>新闻后台管理</el-breadcrumb-item>
        <el-breadcrumb-item>新闻审核</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-button style="margin-bottom: 20px;" type="primary" plain  @click="batchReview">批量审核 <i class="el-icon-circle-plus-outline"></i></el-button>

    <el-table
        ref="table"
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="id"
          label="新闻编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="createtime"
          label="创建时间"
          width="180">
        <template v-slot="scope">
          {{ scope.row.createtime | filtertime }}
        </template>
      </el-table-column>
      <el-table-column
          prop="newtitle"
          label="新闻标题"
          width="180">
        <template v-slot="scope">
          <!-- tips悬浮提示 -->
          <el-tooltip
              placement="top"
              v-model="scope.row.showTooltip"
              :open-delay="500"
              effect="dark"
              :disabled="!scope.row.showTooltip">
            <div slot="content">{{ scope.row.newtitle }}</div>
            <div @mouseenter="showTips($event,scope.row)" class='myNote'>{{ scope.row.newtitle }}</div>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column
          prop="newclass"
          label="新闻分类">
      </el-table-column>
      <el-table-column
          prop="newauthor"
          label="发表媒体">
      </el-table-column>
      <el-table-column
          prop="ishot"
          label="是否热搜">
        <template v-slot="scope">
          <el-switch v-model="scope.row.ishot" active-color="#13ce66" inactive-color="#ccc"
                     @change="changeEnable(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="newimg"
          label="新闻封面">
        <template v-slot="scope">
          <el-image
              style="width: 60px; height: 60px;border-radius: 10px"
              :src="scope.row.newimg"
              :preview-src-list="[scope.row.newimg]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="新闻详情" align="center">
        <template v-slot="scope">
          <el-button type="primary" size="small" @click="details(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column
          prop="isrelease"
          align="center"
          label="是否发布">
        <el-tag type="danger">未发布</el-tag>
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template v-slot="scope">
          <el-tag style="cursor:pointer;margin-right: 10px;" type="success" @click="toExamine(scope.row)">审核通过</el-tag>
          <el-tag style="cursor:pointer;" type="danger" @click="dele(scope.row.id)">删除新闻</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 4, 6]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </div>
    <el-drawer
        title="新闻详情"
        :visible.sync="drawer"
        @close="drawerClose"
    >
      <div class="nescontent">
        <h1 style="font-size:23px;">{{ drawerFrom.newtitle }}</h1>
        <el-image style="width: 550px; height: 300px;margin-left: 8px;" :src="drawerFrom.newimg">
        </el-image>
        <p v-html="drawerFrom.newcontent"></p>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import moment from 'moment';
import {addOrUpdateNews, getUnreviewedNews,deleteNews,reviewNews} from '@/api/News'
import {deleteFeedback} from "@/api/feedback";

export default {
  data() {
    return {
      total: 0,
      pageNum: 1,
      pageSize: 6,
      tableData: [],
      drawer: false,
      drawerFrom: {},
    }
  },
  created() {
    this.getExamineList();
  },
  filters: {
    filtertime(value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    },
  },
  methods: {
    //批量审核
    batchReview() {
      const selectedRows = this.$refs.table.selection;
      const  ids=selectedRows.map(item=>item.id)
      console.log(ids)
      if (selectedRows.length === 0) {
        this.$message({
          type: 'warning',
          message: '请至少选择一条数据'
        });
        return;
      }
      reviewNews(ids).then(res => {
        console.log(res)
        this.$message({
          type: 'success',
          message: '审核成功!'
        });
        this.getExamineList();
      })
    },


    dele(id) {
      this.$confirm('此操作将永久删除该新闻, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteNews(id).then(res => {
          console.log(res)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getExamineList();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showTips(obj, row) {
      let TemporaryTag = document.createElement('span');
      TemporaryTag.innerText = row.newtitle;
      TemporaryTag.className = 'getTextWidth';
      document.querySelector('body').appendChild(TemporaryTag);
      let currentWidth = document.querySelector('.getTextWidth').offsetWidth;
      document.querySelector('.getTextWidth').remove();
      const cellWidth = obj.target.offsetWidth
      currentWidth <= (2 * cellWidth) ? row.showTooltip = false : row.showTooltip = true
    },

    drawerClose() {
      this.drawerFrom = {}
    },
    details(row) {
      this.drawer = true
        row.newcontent = row.newcontent.replace(/<img/g, '<img style="max-width: 100%;"');
      this.drawerFrom = row
      console.log(this.drawerFrom)
    },
    toExamine(row) {
      row.isrelease = 1;
      addOrUpdateNews(row).then((res) => {
        console.log(res)
        if (res) {
          this.$message.success("操作成功");
          this.getExamineList();
        } else {
          this.$message.error('操作失败');
        }
      });
    },
    getExamineList() {
      getUnreviewedNews(this.pageNum, this.pageSize).then((res) => {
        console.log(res);
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.pageSize = pageSize;
      this.getExamineList();
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.pageNum = pageNum;
      this.getExamineList();
    },
  }
}
</script>

<style>
.nescontent {
  margin: 0 40px 0 20px;
}

p {
  text-indent: 2em;
  font-size: 17px;
}
</style>
